<template>
	<view class="container">
		<u-subsection :customStyle="{height: '80rpx', borderRadius: '20rpx'}" fontSize="32rpx" bgColor="transparent" inactiveColor="#516DDB" activeColor="#516DDB" mode="subsection" :list="tabList" :current="current" @change="currentChange"></u-subsection>
		<!-- 地址 -->
		<view class="address-item" v-if="address?.name && current == 0" @tap="goAddress">
			<view class="icon">
				<u-image width="100%" height="2rpx" :src="getServerStatic('/static/images/line.png')"></u-image>
			</view>
			<view style="width: 100%;">
				<view class="user-info-box">
					<view class="user-info">
						<view class="name">{{ address.name }}</view>
						<view class="name">{{ address.mobile }}</view>
					</view>
                    <view class="right-icon" >
                        <u-icon name="arrow-right" color="#333333" size="14"></u-icon>
                    </view>
				</view>
				<view class="address">
					{{ address.address }}
				</view>
			</view>
		</view>
		<!-- 无地址展示 -->
		<view class="address-item" v-else-if="!address?.name && current == 0"  @tap="goAddress">
			<view class="icon">
				<u-image width="100%" height="2rpx" :src="getServerStatic('/static/images/line.png')"></u-image>
			</view>
			<view class="address-tip" style="width: 100%;">
				请选择您的收货地址
			</view>
			<view class="right-icon">
				<u-icon name="arrow-right" color="#333333" size="14"></u-icon>
			</view>
		</view>

        <!-- 自提地址展示 -->
        <view class="address-item" v-if="current == 1">
            <view class="icon">
                <u-image width="100%" height="2rpx" :src="getServerStatic('/static/images/line.png')"></u-image>
            </view>
            <view style="width: 100%;">
                <view class="user-info-box">
                    <view class="user-info">
                        <view class="name">{{ systemStore.mallPickupAddressName }}</view>
                        <view class="name">{{ systemStore.mallPickupAddressMobile }}</view>
                    </view>
                    <!-- 位置导航 -->
                    <view class="icon-box" style="position: relative;z-index: 99;" @tap.stop="showPickupAddressMap">
                        <view class="">位置导航</view>
                        <u-image width="24rpx" height="24rpx" :src="getServerStatic('/static/images/a19.png')"></u-image>
                    </view>

                </view>
                <view class="address">
                    {{ systemStore.mallPickupAddress }}
                </view>
            </view>
        </view>


		<!-- 商品详情 -->
		<view class="commodity-box" v-for="(item, index) in productData" :key="index">
			<view class="left">
<!--				<u-image width="170rpx" height="155rpx" src="/static/logo.png"></u-image>-->
				<u-image width="170rpx" height="155rpx" :src="checkAndFixUrl(item.cover)" mode="aspectFit"></u-image>
			</view>
			<view class="right">
				<view class="com-title">{{ item.name }}</view>
				<view class="sku-box">规格：{{ item.attr_name }}</view>
				<view class="count-box">购买数量：{{ item.quantity }}件</view>
			</view>
		</view>

		<!-- 商品价格 -->
		<view class="order-item">
			<view class="status-box">
				<view class="name">商品价格</view>
				<view class="name">￥{{ productTotal }}</view>
			</view>
			<view class="content-box">
				<view class="content-item">
					<text>配送费用</text>
					<text v-if="freight <= 0">快递包邮</text>
					<text v-else>￥{{ freight }}</text>
				</view>
				<view class="content-item">
					<text>购买数量</text>
					<text>{{ quantityTotal }}</text>
				</view>
				<view class="content-item">
					<text>抵扣券</text>

					<!-- 三种判断 -->
					<!-- <text>暂无可用</text> -->
					<view class="discount-box" @tap="showPop">
						 <view class="discount" v-if="discount > 0 && discountCouponValue > 0">-{{ discountCouponValue }}元</view>
						<view class="default" v-else>选择抵扣券</view>
						<u-icon name="arrow-right" color="#333333" size="14"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<!-- 支付方式 -->
		<view class="payment-select-box">
			<u-radio-group v-model="paymentWay" placement="column" @change="handlePaymentWayChange">
				<view class="payment-item" @click="handleSelectPayment('wechat')">
					<view class="left">
						<u-image width="40rpx" height="40rpx" :src="getServerStatic('/static/images/a40.png')" ></u-image>
						<view class="pay-name">微信支付</view>
					</view>
					<view class="right">
						<u-radio activeColor="#516DDB" name="wechat"></u-radio>
					</view>
				</view>
				<view class="payment-item center" @click="handleSelectPayment('balance')">
					<view class="left">
						<u-image width="40rpx" height="40rpx" :src="getServerStatic('/static/images/a41.png')"></u-image>
						<view class="pay-name">余额支付</view>
						<view class="pay-tip">当前余额：{{userStore.store_balance}}元</view>
					</view>
					<view class="right">
						<u-radio activeColor="#516DDB" name="balance" :disabled="(total - discountCouponValue) > userStore.store_balance"></u-radio>
					</view>
				</view>
			</u-radio-group>
		</view>

		<!-- 备注 -->
		<view class="order-notes">
			<view class="name">备注：</view>
			<view class="note-area">
				<u--textarea border="none" maxlength="100" v-model="remark" placeholder="请输入备注" ></u--textarea>
			</view>
		</view>
	</view>

	<!-- 底部购买按钮 -->
	<view class="buy-wrap">
		<u-checkbox-group v-model="agree" placement="column">
			<view class="agreement-box">
				<u-checkbox name="agreeCheck" shape="circle" v-model:checked="agree[0]"></u-checkbox>
				<view class="context">
					<text>已阅读并同意</text>
					<text class="color" @tap="goAgreement(1)">《用户服务协议》</text>
					<text>和</text>
					<text class="color" @tap="goAgreement(2)">《隐私协议》</text>
				</view>
			</view>
		</u-checkbox-group>

		<view class="buy-btn-wrap">
			<view class="left">
				<view class="name">共计</view>
				<view class="price-box">
					<text class="yuan">￥</text>
					<text class="price">{{ total - discountCouponValue }}</text>
				</view>
			</view>
			<view class="right">
				<u-button throttleTime="1000" :customStyle="{height: '88rpx', letterSpacing: '.1rem', width: '345rpx'}" :hairline="false" type="mini"
					shape="circle" color="#516DDB" @click="payConfirm" :disabled="payBtnDisabled">立即购买</u-button>
			</view>
		</view>
	</view>


	<!-- 抵扣券弹窗 -->
	<u-popup closeable bgColor="transparent" :show="discountPop" @close="discountPop = false">
		<view class="discount-pop">
			<view class="discount-content">
				<view class="pop-title">选择抵扣券</view>
				<scroll-view scroll-y="true" style="max-height: 800rpx;">
					<view class="discount-list">
						<u-radio-group v-model="discount" placement="column">
						<view class="item" v-for="(item, i) in coupons" :key="i">
							<view class="icon">
								<u-image width="180rpx" height="180rpx" :src="getServerStatic('/static/images/a21.png')"></u-image>
							</view>
							<!-- 左上角 -->
							<view class="count-box">
								剩余{{ item.coupon_num }}张
							</view>
							<view class="left">
								<view class="user-info">
									<view class="name">购药抵扣券</view>
								</view>
								<view class="mobile">
									抵扣券可在购买商品时使用
								</view>
							</view>
							<view class="right">
								<view class="price-box">
									<text>{{ item.coupon_par_value }}</text>
									<text class="yuan">元</text>
								</view>
								<view class="radio-wrap">
									<u-radio activeColor="#516DDB" :name="item.id"></u-radio>
								</view>
							</view>
						</view>
						</u-radio-group>
					</view>
				</scroll-view>
			</view>
			<view class="pay-btn">
				<u-button throttleTime="1000" :customStyle="{height: '86rpx', letterSpacing: '.1rem', boxShadow: '0rpx 4rpx 34rpx 1rpx rgba(87,129,240,0.4)'}" :hairline="false" type="mini"
					shape="circle" color="linear-gradient(315deg, #4975EC 0%, #97B3FF 100%)" @click="confirmDiscount">确认</u-button>
			</view>
		</view>
	</u-popup>

</template>

<script setup>
    import {ref} from "vue"
    import {onLoad, onShow} from '@dcloudio/uni-app'
    import {beforeCheckout, singleConfirmCheckout} from "@/api/product";
    import {checkAndFixUrl, getServerStatic} from "@/utils/tool";
    import {getDefaultAddress} from "@/api/user";
    import {getMallUseCoupons} from "@/api/coupon";

    import useUniAPi from "@/hooks/useUniAPi";
    const { navigateTo, redirectTo, payment } = useUniAPi()

    import {useSystemStore, useUserStore} from "@/store";
    import {initiateMallPayment} from "@/api/mall";
    import {beforeCheckoutByCart, cartConfirmCheckout} from "@/api/cart";
    import {getCache, setCache} from "@/utils/cache";

    // 用户store
    const userStore = useUserStore();
    // 系统
    const systemStore = useSystemStore()

    // 立即下单参数
    const skuId = ref(0);
    const quantity = ref(1);
    const checkoutType = ref('')

    // 购物车下单参数
    const cartIds = ref([])
    const cartIdsStr = ref('')

    onLoad((evt) => {
        console.log('订单结算', evt)
        if (!evt?.type) {
            goBack()
        }

        // 选择的地址
        if (evt?.address_id) {
            let addressCache = getCache('confirmAddress')
            addressCache = JSON.parse(addressCache)
            if (addressCache) {
                address.value = addressCache
            }
        } else {
            handleGetDefaultAddress()
        }

        // 单独购买
        if (evt.type === 'single') {
            if (!evt.sku_id || !evt.quantity) {
                goBack()
            }
            checkoutType.value = 'single'
            skuId.value = evt?.sku_id ?? 0
            quantity.value = evt?.quantity ?? 1
            handleBeforeCheckout()

        } else if(evt.type === 'cart') {
            // 购物车结算
            checkoutType.value = 'cart'
            let cartIdsStr = evt?.cart_ids || ''
            cartIdsStr.value = cartIdsStr
            if (cartIdsStr === '') {
                goBack()
            }
            cartIds.value = cartIdsStr.split(',');
            handleBeforeCheckoutByCart()
        } else {
            goBack()
        }

    })

    // 商品数据
    const productData = ref([])
    // 金额
    const total = ref(0)
    const productTotal = ref(0)
    // 运费
    const freight = ref(0)
    const oldFreight = ref(0)
    // 数量
    const quantityTotal = ref(0)

    // 结算数据预览
    const handleBeforeCheckout = async () => {
        uni.showLoading({
            title: '加载中'
        });
        const {code, data, message} = await beforeCheckout({sku_id: skuId.value, quantity: quantity.value})
        uni.hideLoading();

        if (code === 1) {
            console.log(data)
            productData.value = data.data ?? []
            productTotal.value = data.productTotal ?? 0
            total.value = data.total ?? 0
            freight.value = data.freight ?? 0
            oldFreight.value = data.freight ?? 0
            quantityTotal.value = data.quantity ?? 0
        } else {
            uni.showModal({
                title: '提示',
                content: message ?? "请求异常",
                showCancel: false,
                success: function (res) {
                }
            });
            setTimeout(() => {
                goBack()
            }, 800)
        }
    }

    const handleBeforeCheckoutByCart = async () => {
        uni.showLoading({
            title: '加载中'
        });
        const {code, data, message} = await beforeCheckoutByCart({cart_ids: cartIds.value})
        uni.hideLoading();
        if (code === 1) {
            console.log(data)
            productData.value = data.data ?? []
            productTotal.value = data.productTotal ?? 0
            total.value = data.total ?? 0
            freight.value = data.freight ?? 0
            oldFreight.value = data.freight ?? 0
            quantityTotal.value = data.quantity ?? 0
        } else {
            uni.showModal({
                title: '提示',
                content: message ?? "请求异常",
                showCancel: false,
                success: function (res) {
                }
            });
            setTimeout(() => {
                goBack()
            }, 800)
        }
    }


    // 地址信息
    const address = ref({})
    const handleGetDefaultAddress = async () => {
        const {code, data} = await getDefaultAddress()
        if (code === 1) {
            address.value = data
        }
    }

	// 是否阅读协议
	const agree = ref([])
	// 支付方式
	const paymentWay = ref('wechat')
    const handlePaymentWayChange = (e) => {
        paymentWay.value = '' + e;
    }
    const handleSelectPayment = (way) => {
        paymentWay.value = way;
    }

	// 顶部切换
	const current = ref(0)
	// 备注
	const remark = ref('')
	// 抵扣弹窗
	const discountPop = ref(false)
	// 选中的抵扣券
	const discount = ref(0)
    const discountCouponValue = ref(0)

	const tabList = ref(['商家配送', '到店自提'])

    // 切换邮寄方式
	const currentChange = e => {
		current.value = e
        if (e === 1) {
            total.value = total.value - oldFreight.value
            freight.value = 0
        } else {
            if (oldFreight.value > freight.value) {
                total.value = total.value + oldFreight.value
                freight.value = oldFreight.value
            }
        }
        console.log(e)
	}

    // 卡劵列表
    const coupons = ref([])
    // 选择卡劵
	const showPop = async () => {
        uni.showLoading({
            title: '加载中'
        });

        const {code, data} = await getMallUseCoupons({total: productTotal.value})
        uni.hideLoading();

        if (code === 1) {
            console.log(data)
            coupons.value = data
        } else {
            coupons.value = []
        }
		discountPop.value = true
	}
	// 确认按钮
	const confirmDiscount = () => {
		discountPop.value = false
        console.log('选择卡劵ID',discount.value)
        if (discount.value > 0) {
            let coupon = coupons.value.find(item => item.id === discount.value);
            discountCouponValue.value = coupon?.coupon_par_value || 0
            console.log('选择卡劵', coupon)
        } else {
            discountCouponValue.value = 0
        }
	}

    const payBtnDisabled = ref(false)
	// 立即购买
	const payConfirm = () => {
		if (agree.value[0] != 'agreeCheck') {
			uni.showToast({
				icon: 'none',
				title: '请阅读并同意隐私协议',
				mask: true
			})
			return
		}

        // 判断类型
        if (checkoutType.value === 'single') {
            console.log('单独结算')
            payBtnDisabled.value = true
            handleSingleConfirmCheckout()
        }

        if (checkoutType.value === 'cart') {
            console.log('购物后结算')
            payBtnDisabled.value = true
            handleCartConfirmCheckout()
        }
        return;
        uni.navigateTo({
			url: '/mine/reservation/success'
		})
	}

    // 结算订单
    const handleSingleConfirmCheckout = async () => {
        let param = {
            sku_id: skuId.value,
            quantity: quantityTotal.value,
            address_id: address?.value?.id || 0,
            shipping_method: current.value === 0 ? 'mail': 'self_pickup',
            coupon_id: discount.value,
            payment_method: paymentWay.value,
            remark: remark.value
        }

        uni.showLoading({
            title: '加载中'
        });
        const {code, data, message} = await singleConfirmCheckout(param)
        uni.hideLoading();
        if (code === 1) {
            console.log(data)
            await handleInitiatePayment(data.id)

        } else {
            uni.showModal({
                title: '提示',
                content: message ?? "请求异常",
                showCancel: false,
                success: function (res) {
                }
            });
        }
    }

    // 购物车结算创建订单.
    const handleCartConfirmCheckout = async () => {
        let param = {
            cart_ids: cartIds.value,
            address_id: address?.value?.id || 0,
            shipping_method: current.value === 0 ? 'mail': 'self_pickup',
            coupon_id: discount.value,
            payment_method: paymentWay.value,
            remark: remark.value
        }

        uni.showLoading({
            title: '加载中'
        });
        const {code, data, message} = await cartConfirmCheckout(param)
        uni.hideLoading();
        if (code === 1) {
            console.log(data)
            await handleInitiatePayment(data.id)

        } else {
            uni.showModal({
                title: '提示',
                content: message ?? "请求异常",
                showCancel: false,
                success: function (res) {
                }
            });
        }
    }

    const handleInitiatePayment = async (orderId) => {
        uni.showLoading({
            title: '加载中'
        });
        const {code ,data, message} = await initiateMallPayment({orderId: orderId, method: paymentWay.value})
        uni.hideLoading();

        if (code === 1) {
            if (paymentWay.value === 'wechat') {
                const result =  await payment(data)
                if (result?.errMsg && result.errMsg === 'requestPayment:ok') {
                    uni.showToast({
                        mask: true,
                        title: '支付完成!',
                        icon: 'success'
                    })
                    delayToOrderList()
                } else {
                    uni.showToast({
                        mask: true,
                        title: '取消支付!',
                        icon: 'none'
                    })
                    delayToOrderList()
                }
            } else {
                uni.showToast({
                    mask: true,
                    title: '支付完成!',
                    icon: 'success'
                })
                delayToOrderList()
            }
        } else {
            uni.showModal({
                title: '提示',
                content: message ?? "请求异常",
                showCancel: false,
                success: function (res) {
                }
            });
            // 跳转订单列表页面
            delayToOrderList()
        }

    }

    const delayToOrderList = () => {
        setTimeout(() => {
            redirectTo({
                url: "/mine/commodity/list"
            })
        },700)
    }

	// 跳转地址列表
	const goAddress = () => {
        // setCache('checkoutType', checkoutType.value)
        // setCache('skuId', skuId.value)
        // setCache('quantity', quantity.value)
        // setCache('cartIdsStr', cartIdsStr.value)

		uni.navigateTo({
			url: `/mine/address/list?source=payment&checkoutType=${checkoutType.value}&skuId=${skuId.value}&quantity=${quantity.value}&cartIdsStr=${cartIdsStr.value}`,
			success: () => {
                // 选择完毕
				uni.$once('select', (res) => {
                    address.value = res
				})
			}
		})
	}

    const showPickupAddressMap = () => {
        uni.openLocation({
            latitude: Number(systemStore.mallPickupAddressLatitude),
            longitude: Number(systemStore.mallPickupAddressLongitude),
            name: systemStore.mallPickupAddressName,
            address: systemStore.mallPickupAddress,
            scale: 18,
            success: function () {
                console.log('success');
            },
            fail: function (err) {
                console.log(err);
            }
        });
    }
	// 用户协议和隐私政策 1用户 2隐私
	const goAgreement = (e) => {
		uni.navigateTo({
			url: `/mine/agreement/agreement?status=${e}`
		})
	}

    const goBack = () => {
        uni.navigateBack()
    }
</script>

<style lang="scss" scoped>
	.container {
		padding: 30rpx 26rpx 300rpx;
	}

	.address-item {
		margin-top: 30rpx;
		position: relative;
		@include between(100%);
		margin-bottom: 40rpx;
		padding: 38rpx 38rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0 0;
		.address-tip {
			font-weight: bold;
			color: #000000;
			font-size: 32rpx;
		}
		.icon-box {
			display: flex;
			align-items: center;

			&>view {
				margin-right: 10rpx;
				color: #516DDB;
				font-size: 28rpx;
			}
		}
		.icon {
			width: 100%;
			position: absolute;
			left: 0;
			bottom: 0;
			z-index: 3;
		}
		.user-info-box {
			@include between(100%);
			.user-info {
				@include start();
				.name {
					font-size: 28rpx;
					font-weight: bold;
					color: #000000;
					margin-right: 26rpx;
				}
			}
		}

		.address {
			margin-top: 24rpx;
			font-size: 28rpx;
			color: #000000;
		}
	}

	.commodity-box {
		@include between(100%, 100%);
		margin-bottom: 30rpx;
		padding: 36rpx 26rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		.right {
			flex: 1;
			margin-left: 22rpx;
			@include between(100%, 170rpx);
			flex-direction: column;
			align-items: flex-start;
			padding: 10rpx 0;
			color: #000000;
			font-size: 30rpx;
			.com-title {
				@include over-ellip(450rpx);
				font-weight: bold;
			}
            .sku-box {
                @include over-ellip(450rpx);
            }
		}
	}


	.order-item {
		margin-bottom: 30rpx;
		padding: 38rpx 38rpx 1rpx;
		background: #FFFFFF;
		border-radius: 30rpx;

		.status-box {
			@include between(100%);
			padding-bottom: 32rpx;
			border-bottom: 1rpx solid #E8E8E8;
			margin-bottom: 30rpx;
			.name {
				font-size: 30rpx;
				font-weight: bold;
				color: #000000;
			}
			.status {
				color: #D66A44;
			}
			.status1 {
				color: #AAAAAA;
			}
		}
		.content-box {
			width: 100%;
			position: relative;
			font-size: 26rpx;
			color: #606672;

			.content-item {
				@include between(100%);
				margin-bottom: 30rpx;
				font-size: 28rpx;
				color: #000000;
				.discount-box {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					.discount {
						color: #F55726;
						margin-right: 14rpx;
					}
					.default {
						color: #000000;
						margin-right: 14rpx;
					}
				}
				.order-no {
					@include start();
					& > text {
						color: #312C2A;
						margin-right: 20rpx;
					}

				}

				&>text {
					&:nth-child(2) {
						color: #312C2A;
					}
				}

			}
		}
	}

	.payment-select-box {
		padding: 30rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		margin-top: 20rpx;
		.payment-item {
			@include between(100%);
			.left {
				@include start();
				.pay-name {
					color: #000000;
					font-size: 28rpx;
					margin-left: 16rpx;
				}
				.pay-tip {
					margin-left: 16rpx;
					color: #B3BCCC;
				}
			}
		}
		.center {
			margin-top: 26rpx;
		}
	}

	.order-notes {
		margin-top: 20rpx;
		border-radius: 30rpx;
		padding: 10rpx 30rpx;
		@include between(100%);
		align-items: flex-start;
		background-color: #fff;
		.name {
			padding-top: 16rpx;
			color: #000000;
			font-size: 28rpx;
			// margin-right: 28rpx;
		}
		.note-area {
			flex: 1;
		}
	}

	.buy-wrap {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		padding-top: 21rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-bottom: calc(env(safe-area-inset-bottom) + 16rpx);
		box-shadow: 0rpx 0rpx 16rpx 1rpx rgba(0,0,0,0.1);
		background: #FFFFFF;
		z-index: 99;

		.agreement-box {
			@include start();
			.context {
				font-size: 26rpx;
				color: #333333;
				margin-left: 10rpx;

				.color {
					color: #8B601E;
				}
			}
		}
		.buy-btn-wrap {
			@include between(100%);
			margin-top: 21rpx;
			.left {
				display: flex;
				align-items: flex-end;
				.name {
					color: #000000;
					margin-right: 14rpx;

				}
				.price-box {
					color: #F55726;
					.price {
						font-weight: bold;
						font-size: 40rpx;
					}
				}
			}
		}
	}

	.discount-pop {
		background: #FFFFFF;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		.discount-content {
			padding: 40rpx 40rpx 0;
		}
		.pop-title {
			color: #000000;
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 52rpx
		}

		.discount-list {
			.item {
				@include between(100%);
				position: relative;
				margin-bottom: 30rpx;
				padding: 30rpx 38rpx;
				background: #FFFFFF;
				border-radius: 30rpx;
				box-shadow: 0rpx 0rpx 30rpx 1rpx rgba(153, 153, 153, 0.16);
				overflow: hidden;
				.icon {
					position: absolute;
					top: 0;
					right: 38rpx;
					z-index: 99;
				}
				.count-box {
					position: absolute;
					left: 0;
					top: 0;
					z-index: 99;
					@include center(144rpx, 50rpx);
					background: #ECF1FE;
					border-radius: 30rpx 0rpx 20rpx 0rpx;
					color: #5780EF;
				}

				.user-info {
					@include between(100%);
					.name {
						font-size: 34rpx;
						color: #312C2A;
					}
				}
				.mobile {
					margin-top: 18rpx;
					font-size: 26rpx;
					color: #999999;
				}
				.left {
					padding-top: 30rpx;
				}
				.right {
					position: relative;
					z-index: 99;
					@include center();
					flex-direction: column;
					.price-box {
						font-weight: bold;
						color: #F55726;
						font-size: 46rpx;
						margin-bottom: 10rpx;
						.yuan {
							font-size: 26rpx;
						}
					}
					.radio-wrap {
						margin-top: 30rpx;
					}
				}
			}

		}

		.pay-btn {
			margin-top: 30rpx;
			padding: 13rpx 55rpx 23rpx;
			box-shadow: 0rpx 0rpx 16rpx 1rpx rgba(0,0,0,0.1);

		}
	}
</style>
